<template>
	<el-row class="login-container">
		<el-col :md="12" :lg="12" :xl="12">
			<div class="hidden-sm-and-down login-left">
				<div class="login-image">
					<img src="../../assets/images/login.png" alt="login" />
					<el-space direction="vertical" class="login-slogin" alignment="flex-start">
						<div style="font-size:28px">欢迎使用本系统</div>
						<div>开箱即用的中后台管理系统</div>
					</el-space>
				</div>
			</div>
		</el-col>
		<el-col :md="12" :lg="12" :xl="12" class="login-form-wrapper">
			<div :class="['theme-container', { 'dark-theme-container': currentTheme === 'dark' }]">
				<el-icon v-if="currentTheme === 'dark'" @click="toggleTheme('light')">
					<Moon />
				</el-icon>
				<el-icon v-else>
					<Sunny color="#fde047" @click="toggleTheme('dark')" />
				</el-icon>
			</div>
			<div class="login-form">
				<div class="login-logo">
					<img class="login-icon" src="@/assets/logo.png" alt="logo" />
					<span class="logo-text">Clean-Admin</span>
				</div>
				<el-form :model="formState" label-position="top" @submit.prevent="onFinish">
					<el-form-item prop="username" :rules="[{ required: true, message: 'Please input your username!' }]">
						<el-input v-model="formState.username" placeholder="请输入用户名: admin" />
					</el-form-item>
					<el-form-item prop="password" :rules="[{ required: true, message: 'Please input your password!' }]">
						<el-input v-model="formState.password" type="password" placeholder="请输入密码: admin123"
							show-password />
					</el-form-item>
					<el-button type="primary" native-type="submit">登录</el-button>
					<el-divider class="form-divider">其它账号登录</el-divider>
					<div class="social-login">
						<el-icon class="social-icon">
							<ChatDotRound />
						</el-icon>
						<el-icon class="social-icon">
							<Money />
						</el-icon>
						<el-icon class="social-icon">
							<Connection />
						</el-icon>
						<el-icon class="social-icon">
							<Reading />
						</el-icon>
					</div>
				</el-form>
			</div>
		</el-col>
	</el-row>
	<!-- <div class="login-container">
		<div class="login-box">
			<div>
				<el-icon v-if="currentTheme === 'dark'">
					<Moon />
				</el-icon>
				<el-icon v-else>
					<Sunny />
				</el-icon>
			</div>
			<div class="login-left">
				<img src="../../assets/images/login.png" alt="login" />
			</div>
			
		</div>
	</div> -->
</template>

<script setup lang="ts">
import 'element-plus/theme-chalk/display.css';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElNotification } from 'element-plus';
import { fetchLogin } from '@/apis/admin/user';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/stores';
import usePermissionHook from '@/hooks/admin/usePermissionHook';

import { ChatDotRound, Money, Connection, Reading } from '@element-plus/icons-vue';

const themeStore = useThemeStore();
const { currentTheme } = storeToRefs(themeStore);
const { toggleTheme } = themeStore;

interface FormState {
	username: string;
	password: string;
}

const formState = reactive<FormState>({
	username: 'admin',
	password: 'admin123',
});

const router = useRouter();
const { fetchAuthRoutes } = usePermissionHook();
const onFinish = () => {
	fetchLogin<FormState>(formState)
		.then((res) => {
			ElNotification({
				type: res.code === 200 ? 'success' : 'error',
				title: '提示',
				message: res.code === 200 ? '登录成功' : res.message,
			});
			if (res.code === 200) {
				fetchAuthRoutes().then(() => {
					router.push({ name: 'home' });
				});
			}
		})
		.catch(() => { });
};
</script>

<style scoped lang="scss">
.login-container {
	height: 100vh;

	.login-left {
		height: 100%;
		background-color: var(--el-color-primary-light-5);
		position: relative;

		.login-image {
			position: absolute;
			top: 50%;
			left: 50%;
			position: absolute;
			transform: translate(-50%, -50%);

			img {
				width: 350px;
			}

			.login-slogin {
				color: #fff;
				position: relative;
				top: -64px;
				align-items: flex-start;
				font-size: 14px;
			}
		}
	}

	.login-form-wrapper {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		position: relative;
		background-color: var(--el-color-primary-light-9);

		.theme-container {
			position: absolute;
			top: 16px;
			right: 16px;
			cursor: pointer;
			font-size: 24px;
			width: 32px;
			height: 32px;
			border: 1px solid #fde047;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
		}

		.dark-theme-container {
			border: 1px solid #4c4d4f;
		}

		.login-form {
			width: 60%;

			.login-logo {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 40px;

				.login-icon {
					width: 70px;
					border-radius: 50%;
				}

				.logo-text {
					padding-left: 25px;
					font-size: 42px;
					font-weight: 700;
					white-space: nowrap;
				}
			}
		}

		:deep(.el-form) {
			.el-form-item {
				margin-bottom: 24px;

				.el-form-item__content {
					height: 40px;
					.el-input {
						height: 100%;
						.el-input__inner {
							height: 100%;
						}
					}
				}
			}
		}

		.el-button {
			width: 100%;
		}

		.form-divider {
			margin: 32px 0;
			font-size: 14px;
		}

		.social-login {
			display: flex;
			justify-content: center;
			gap: 12px;

			.social-icon {
				font-size: 28px;
				cursor: pointer;

				&:nth-child(1) {
					color: #55ac8b;
				}

				&:nth-child(2) {
					color: #0066cc;
				}

				&:nth-child(3) {
					color: #c13584;
				}

				&:nth-child(4) {
					color: #0077ae;
				}
			}
		}
	}

	// display: flex;
	// align-items: center;
	// justify-content: center;
	// background-color: #eee;
	// min-width: 550px;
	// height: 100%;
	// min-height: 500px;
	// background-image: url('../../assets/images/bg_login.svg');
	// background-position: 50%;
	// background-size: cover;

	// .login-box {
	// 	position: relative;
	// 	box-sizing: border-box;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-around;
	// 	width: 86%;
	// 	height: 88%;
	// 	padding: 0 4% 0 20px;
	// 	overflow: hidden;
	// 	border-radius: 10px;
	// 	background-color: var(--background-color);

	// 	:deep(.el-switch) {
	// 		width: 40px;
	// 		position: absolute;
	// 		top: 8px;
	// 		right: 16px;
	// 		// background: #3c3f44;

	// 		.el-switch__core {
	// 			border-radius: 9px;
	// 			width: 24px !important;
	// 			height: 24px;
	// 		}

	// 		// .el-switch__action {
	// 		// 	background: #000000;
	// 		// }
	// 	}

	// 	.login-left {
	// 		width: 750px;

	// 		img {
	// 			width: 100%;
	// 			height: 100%;
	// 		}
	// 	}

	// 	.login-form {
	// 		background-color: transparent !important;
	// 		box-shadow: var(--base-box-shadow);
	// 		padding: 40px 45px 25px;
	// 		border-radius: 10px;

	// 		.login-logo {
	// 			display: flex;
	// 			align-items: center;
	// 			justify-content: center;
	// 			margin-bottom: 40px;

	// 			.login-icon {
	// 				width: 70px;
	// 			}

	// 			.logo-text {
	// 				padding-left: 25px;
	// 				font-size: 42px;
	// 				font-weight: 700;
	// 				white-space: nowrap;
	// 			}
	// 		}

	// 		:deep(.el-form) {
	// 			.el-form-item {
	// 				margin-bottom: 24px;

	// 				.el-form-item__content {
	// 					height: 40px;

	// 					.el-input,
	// 					.el-input__inner {
	// 						height: 100%;
	// 					}
	// 				}
	// 			}
	// 		}

	// 		.el-button {
	// 			width: 100%;
	// 		}

	// 		.form-divider {
	// 			margin: 32px 0;
	// 			font-size: 14px;
	// 		}

	// 		.social-login {
	// 			display: flex;
	// 			justify-content: center;
	// 			gap: 12px;

	// 			.social-icon {
	// 				font-size: 28px;
	// 				cursor: pointer;

	// 				&:nth-child(1) {
	// 					color: #55ac8b;
	// 				}

	// 				&:nth-child(2) {
	// 					color: #0066cc;
	// 				}

	// 				&:nth-child(3) {
	// 					color: #c13584;
	// 				}

	// 				&:nth-child(4) {
	// 					color: #0077ae;
	// 				}
	// 			}
	// 		}
	// 	}
	// }
}
</style>